<template>
  <div class="left-scpjsj">
    <div class="tab-title" :class="isHall?'tab-title1':''">
      <span class="dec">农事实施情况</span>
      <div class="unit" @click="showMask" v-if="!isHall">查看资质</div>
    </div>
    <div class="tab-content">
        <div class="title-bar">
                <span>执行时间</span>
                <span>任务名称</span>
                <span>所属果园</span>
        </div>
        <div class="rant-contect">
            <vue-seamless-scroll
            :data="dataList"
            :class-option="classOption"
            >
                <template v-for="(item,index) in dataList">
                    <div :key="index" class="rank" :class="`${(index+1)%2 ==0?'oushu':'jishu'}`">
                        <div class="time">
                            <img src="../../assets/time-line.png" alt="" style="width:4px;height:21px;">
                            <div class="time-content">
                                <div> {{item.executionStartTime}} </div>
                                <div> {{item.executionEndTime||' - - - '}} </div>
                            </div>
                        </div>
                        <div class="taskname" :title="item.taskName">{{item.taskName}}</div>
                        <div class="name" :title="item.orchardName">{{item.orchardName}}</div>
                    </div>
                </template>
            </vue-seamless-scroll>
        </div>
    </div>
    <div class="mask-detail" v-if="show">
      <farmingMask @closeMask="closeMask"  />
           <!-- <div @click="close" class="close" />
           <div class="top-content">
            <div>绿色资质</div>
           </div>
           <div class="img-content">
            <a-carousel :dots="false" autoplay :autoplaySpeed='5000'> 
             <div class="carousel-content" v-for="(list, index) in changeImgList" :key="index">
                  <img v-for="(img,index2) in list" :key="index2" class="top-img" :src="img" :alt="index2" />
                </div>
            </a-carousel>
           </div> -->
    </div>
  </div>
</template>
<script>
import farmingMask from './farmingMask.vue'
import {queryAgriculturalActivitiesListdp} from '@/api/dashboards'
export default {
    components:{farmingMask},
    props:{
        canShow:{
            type:Boolean
        },
        canShow1:{
            type:Boolean
        },
        isHall:{
            type:Number
        }
    },
  data(){
    return{
        show:false,
        dataList:[
            // {
            //     startTime:'2022-1-12 10：00',
            //     endTime:'2022-1-12 10：00',
            //     taskname:'张国顺家庭顺家家家家庭',
            //     name:'农夫好果园'
            // },
        ]
    }
  },
   watch: {
    canShow:{
      immediate: true,
      handler: function(val) {
          if(val){
              this.show = false
          }
      }
      },
    canShow1:{
      immediate: true,
      handler: function(val) {
          if(val){
              this.show = false
          }
      }
      },
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
  },
  created(){
  },
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    this.queryAgriculturalActivitiesListdp()
  },
  methods: {
     async queryAgriculturalActivitiesListdp() {
      let res = await queryAgriculturalActivitiesListdp()
      this.dataList = res.result&&res.result.length&&res.result
    },
    showMask(){
        this.show = !this.show
        this.$emit('getShow2', this.show);
    },
    closeMask(){
        this.show = false
    },
  },
}
</script>
<style lang="less" scoped>
.left-scpjsj {
  width: 360px;
  height: 142px;
  color: #fff;
  .tab-title1{
     padding-top:24px !important;
  }
  .tab-title {
      padding: 14px 10px 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
    .unit{
        padding-right: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
    }
   
  }
  .tab-content {
        width: 100%;
        height: 77px;
        overflow: hidden;
        color: #fff;
         padding:6px 24px;
        .title-bar {
      height: 28px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.04);
      span{
        &:nth-child(1) {
        width: 115px;
        text-align: left;
        padding-left: 20px;
      }
       &:nth-child(2) {
        width: 78px;
        text-align: center;
      }
       &:nth-child(3) {
        width: 78px;
        text-align: center;
      }
    }
       }
       .rant-contect{
         overflow: hidden;
         .oushu{
             background: rgba(255, 255, 255, 0.04);
         }
       .rank{
        // width: 214px;
        height: 50px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 12px;
          padding: 0px 0px;
            .time{
            width: 115px;
            text-align: left;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .time-content{
                display: flex;
                flex-direction: column;
                align-content: center;
                margin-left: 5px;
            }
        }
         .taskname{
            cursor: pointer;
            width: 78px;
            height: 34px;
            text-align: center;
           overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //多行在这里修改数字即可
            overflow:hidden;
            /* ! autoprefixer: ignore next */
            -webkit-box-orient: vertical;
         }
          .name {
             width: 78px;
            text-align: center;
              white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
         }
     }
    }
    }
    .mask-detail{
        width: 360px;
        height: 270px;
        background: rgba(11, 17, 51, 0.85);
        position: relative;
        top: -182%;
        left: 105%;
        z-index: 1000;
    }
}
</style>